<template>

	<view style="position: fixed;background-color: #f5f5f5;width: 100%;height: 100%;">

		<!-- 顶部 -->
		<view style="display: flex;flex-direction: row;margin: 30rpx 25rpx;">

			<view style="width: 100rpx;flex-grow: 2;line-height:80rpx;margin-left: 20rpx"><text>发闲置</text></view>
			<view style="width: 20rpx;flex-grow: 1;margin-right: 20rpx;"><u-button color="#53c21d" @click="fb()"
					text="发布" shape="circle"></u-button></view>

		</view>

		<!-- 输入描述和上传图片 -->
		<view style="background-color: #ffffff;border-radius: 20rpx;margin:25rpx;padding:20rpx">

			<view style="margin: 20rpx;">
				<u--textarea v-model="good.description" placeholder="请输入内容" border="none"
					style="background-color: #ffffff;"></u--textarea>
				<u-upload style="margin: 20rpx;" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
					name="1" multiple :maxCount="9"></u-upload>
			</view>


			<!-- 选地址和使用情况-->
			<view style="display: flex;margin: 20rpx;">
				<button @click="handleClick"
					style="width: 250rpx;color: #595c62;background-color: #fafafa;border-radius: 150rpx;display: flex;justify-content:center">
					<u-icon name="map"></u-icon>
					<text style="font-size: 90%;">地址</text>
				</button>

				<button @click="show2 = true"
					style="width: 250rpx;color: #595c62;background-color: #fafafa;border-radius: 150rpx;display: flex;justify-content:center">
					<text v-if="good.status==null" style="font-size: 90%;">使用情况</text>
					<view v-else style="display: flex;justify-content:center">
						<text style="font-size: 90%;">{{good.status}}</text>
						<u-icon name="checkmark-circle" color="green"></u-icon>
					</view>

				</button>
			</view>

		</view>

		<!-- 设置价格包邮方式按钮 -->
		<view style="background-color: #ffffff;border-radius: 20rpx;margin:10rpx 25rpx;">
			<button @click="show = true" style="background: transparent;">
				<u-row>
					<u-col span="3" style="text-align: left;margin-left: 20rpx">价格</u-col>
					<u-col span="7">
						<text style="color: red;text-align: right;">￥{{good.price}}</text>
					</u-col>
					<u-col span="2"><u-icon name="arrow-right" style="margin: 20rpx;"></u-icon></u-col>
				</u-row>
			</button>

			<view style="display: flex;justify-content:center">
				<u-line color="#000000" length="95%"></u-line>
			</view>

			<button @click="show1 = true" style="background: transparent;">
				<u-row>
					<u-col span="3" style="text-align: left;margin-left: 20rpx">发货方式</u-col>
					<u-col span="7">
						<text style="text-align: right;">{{ifFHFS}}</text>
					</u-col>
					<u-col span="2"><u-icon name="arrow-right" style="margin: 20rpx;"></u-icon></u-col>
				</u-row>
			</button>
		</view>

		<!-- 设置价格 -->
		<view>
			<u-modal :show="show" @confirm="show = false">
				<view>
					<u-row customStyle="margin: 20rpx 0rpx">
						<u-col span="4">
							<view style="text-align: center;"><text>现价</text></view>
						</u-col>
						<u-col span="4">
							<view>
								<u--input v-model="good.price" border="none" :maxlength="maxlength" type="number"
									@input="onPriceInput" placeholder="请输入价格"></u--input>
							</view>
						</u-col>
						<u-col span="4">
							<view>
								<u-checkbox-group>
									<u-checkbox :checked="bkj" @change="handleCheckboxChange" v-model="bkj"
										shape="circle" label="不砍价"></u-checkbox>
								</u-checkbox-group>
							</view>
						</u-col>
					</u-row>
					<view style="display: flex;justify-content:center">
						<u-line color="#000000" length="95%"></u-line>
					</view>
					<u-row customStyle="margin: 20rpx 0rpx">
						<u-col span="4">
							<view style="text-align: center;"><text>原价</text></view>
						</u-col>
						<u-col span="4">
							<view>
								<u--input v-model="yuanjia" border="none" type="number"></u--input>
							</view>
						</u-col>
					</u-row>

				</view>
			</u-modal>
		</view>

		<!-- 设置买家自提等 -->
		<view>
			<u-modal :show="show1" @confirm="confirm1">
				<view>
					<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
						<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1"
							:key="index" :label="item.name" :name="item.name">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</u-modal>
		</view>

		<!-- 设置几成新 -->
		<view>
			<u-modal :show="show2" @confirm="show2 = false">
				<u-radio-group v-model="radiovalue1" placement="column">
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
						:label="item.name" :name="item.name" @change="radioChange">
					</u-radio>
				</u-radio-group>
			</u-modal>
		</view>

		<view style="height: 200rpx;display: flex;">
			<u-toast ref="uToast"></u-toast>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				user: {},
				good: {
					id: 1, //宝贝id
					user_id: '', //用户id
					description: '', //宝贝描述
					price: 0, //宝贝价格
					address: '暂无', //发布地址
					status: undefined, //宝贝使用状态
					mode1: false, //买家自提
					mode2: false, //送货上门
					mode3: false, //快递邮寄
					sold_out: false //是否售出
				},
				good_img: [], //图片表
				fileList1: [], //上传图片
				maxlength: 8, //输入价格长度
				radiovalue1: undefined, //几成新绑定的值
				checkboxValue1: undefined, //发货方式绑定的值
				bkj: false, //不砍价
				yuanjia: "1145.45", //原价
				ifFHFS: "请选择", //是否选择发货方式
				fahuofangshi: [], //发货方式
				show: false, //设置价格
				show1: false, //设置发货方式
				show2: false, //几成新
				show3: false, //消息提示
				ifData: false, //判断数据是否为空
				//消息提示
				list: [{
						type: 'default',
						message: "数据不能为空",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
					},
					{
						type: 'success',
						message: "发布成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					}
/* 					{
						type: 'error',
						icon: false,
						title: '失败主题',
						message: "一弦一柱思华年",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					},

					{
						type: 'loading',
						title: '正在加载',
						message: "正在加载",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
					},
					{
						type: 'default',
						title: '结束后跳转标签页',
						message: "此情可待成追忆",
						url: '/pages/componentsB/tag/tag',
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png'
					} */
				],
				//几成新
				radiolist1: [{
						name: '崭新出厂',
						disabled: false
					},
					{
						name: '略有磨损',
						disabled: false
					},
					{
						name: '久经沙场',
						disabled: false
					}, {
						name: '战痕累累',
						disabled: false
					}, {
						name: '破损不堪',
						disabled: false
					}
				],
				//发货方式
				checkboxList1: [{
						name: '买家自提',
						disabled: false
					},
					{
						name: '送货上门',
						disabled: false
					},
					{
						name: '快递邮寄',
						disabled: false
					}
				],
				myList: [],
			}
		},
		onLoad() {
			// 获取用户信息
			let that = this;
			uni.getStorage({
				key: 'user',
				success(res) {
					that.user = res.data;
					that.good.user_id = that.user.id;
				}
			});
			console.log(this.user);
		},

		methods: {
			//发布
			fb() {
				this.datas();

				if (this.ifData) {
					this.upload();
				}
			},
			//整合数据，数据验证
			datas() {
				//图片表
				for (let i = 0; i < this.fileList1.length; i++) {
					this.good_img.push({
						id: i + 1,
						good_id: this.good.id,
						no: i + 1,
						src: this.fileList1[i].url
					})
				};

				//判断发货方式
				if (this.fahuofangshi.includes("买家自提")) {
					this.good.mode1 = true
				} else {
					this.good.mode1 = false
				};

				if (this.fahuofangshi.includes("送货上门")) {
					this.good.mode2 = true
				} else {
					this.good.mode2 = false
				};

				if (this.fahuofangshi.includes("快递邮寄")) {
					this.good.mode3 = true
				} else {
					this.good.mode3 = false
				};

				//判断数据是否为空
				/* if (this.good.description == "") {
					alert("描述不能为空");
				};

				if (this.good.mode1 == "" & this.good.mode2 == "" & this.good.mode3 == "") {
					alert("发货方式不能为空");
				};

				if (this.good.price == "" || this.good.price == 0) {
					alert("价格不能为空");
				};

				if (this.good.status == undefined) {
					alert("使用情况不能为空");
				};

				if (this.fileList1 == "") {
					alert("图片不能为空");
				}; */

				if (this.good.description == "" || (this.good.mode1 == "" & this.good.mode2 == "" & this.good.mode3 ==
						"") || (this.good.price == "" || this.good.price == 0) || this.good.status == undefined || this
					.fileList1 == "") {
					//alert("数据不能为空，发布失败");
					this.showToast(this.list[0]);
					this.ifData = false;
				} else {
					this.ifData = true;
				};

			},
			//消息提示
			showToast(params) {
				this.$refs.uToast.show({
					...params,
					complete() {
						params.url && uni.navigateTo({
							url: params.url
						})
					}
				})
			},
			//输入框限制
			onPriceInput(event) {
				
				let value = event;
	
				
				let dot = value.indexOf('.'); //包含小数点

				if (dot > -1) {
					this.maxlength = dot + 3; //长度是小数点后两位
				} else {
					this.maxlength = 8;
				}


				//去掉0开头
				
				value = value.replace(/^0+(\d)/, '$1');

				//不能小于0
				if (value < 0) {
					value = 0;
				}

				this.good.price = value;
			},
			//发货方式确认
			confirm1() {
				this.show1 = false;
				if (this.fahuofangshi.length == 0) {
					this.ifFHFS = "请选择";
				} else {
					this.ifFHFS = "";
					for (let i = 0; i < this.fahuofangshi.length; i++) {
						this.ifFHFS += (this.fahuofangshi[i] + " ");
					}
				}
			},
			//几成新选中
			radioChange(n) {
				// console.log("几成新" + n);
				this.good.status = n;
			},
			//跳转地址页
			handleClick() {
				uni.navigateTo({
					url: '../3_Address/3_Address'
				});
			},
			//发货方式
			checkboxChange(n) {
				// console.log('change', n);
				this.fahuofangshi = n;
				// alert(JSON.stringify(this.fahuofangshi));
			},

			//不砍价选中
			handleCheckboxChange(n) {
				// console.log('change', n);
				this.bkj = n;
				// alert("选中" + this.bkj);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				this.myList = lists;
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//上传图片
			uploadFilePromise(url) {
				// return new Promise((resolve, reject) => {
				// 	let a = uni.uploadFile({
				// 		url: '123456', // 仅为示例，非真实的接口地址
				// 		filePath: url,
				// 		name: 'file',
				// 		formData: {
				// 			user: 'test'
				// 		},
				// 		success: (res) => {
				// 			setTimeout(() => {
				// 				resolve(res.data.data)
				// 			}, 1000)
				// 		}
				// 	});
				// })
			},
			//发表成功执行
			upload() {
				var that = this;

				uni.request({
					method: 'POST',
					url: getApp().globalData.url + "/good/insertGood",
					data: {
						good: that.good
					},
					success(res) {
						that.good.id = res.data.goodId;
						that.imgUpload();

					}
				})

				this.showToast(this.list[1]);
				setTimeout(function() {
					uni.navigateTo({
						url: '../SuccessPage/SuccessPage'
					});
				}, 3000);
			},
			imgUpload() {
				let that = this;
				for (let i = 0; i < that.fileList1.length; i++) {
					uni.uploadFile({
						url: getApp().globalData.url + "/good/imgUpload",
						filePath: that.myList[i].url,
						name: 'file',
						formData: {
							userId: that.user.id,
							goodId: that.good.id
						},
						success(res) {
							console.log(res.data)
						}
					})
				}
			}
		}
	}
</script>

<style>
	button::after {
		border: none;
	}
</style>